<template>
  <div class="zuzhujiagou">

    <el-card v-loading="loading">
      <div class="box">
        <div class="top" style="margin-bottom: 10px;">
          <div class="czbk">创制博客</div>
          <div style="width: 120px;">负责人</div>
          <!-- 操作消息 -->
          <el-dropdown>

            <div>
              操作

              <i class="el-icon-arrow-down" />

              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addEven('')">
                  添加子路由
                </el-dropdown-item>
              </el-dropdown-menu>

            </div>
          </el-dropdown>

        </div>

        <el-tree :data="list" default-expand-all :poror="{label:'name',children:'children'}">

          <template v-slot="{data}">
            <div class="top" style="width:100%;">
              <div class="czbk">{{ data.name }}</div>
              <div style="width: 120px;">{{ data.manager }}</div>
              <el-dropdown>
                <div>
                  操作
                  <i class="el-icon-arrow-down" />
                  <el-dropdown-menu slot="dropdown">
                    <!-- 因为在插槽中data携带了所有数据 -->
                    <el-dropdown-item @click.native="addEven(data.id)">
                      添加子部门
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="bjEven(data)">
                      编辑部门
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="deletEeven(data.id)">
                      删除部门
                    </el-dropdown-item>
                  </el-dropdown-menu>

                </div>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>

    </el-card>

    <!-- 1-3 -->
    <index ref="tj" :list="minlist" @a="hqrsb()" />

  </div>
</template>
<!--

  看
    1.定义api接口
    2.导入api
    3.调用api 渲染,存储
    4.有分页处理分页

  增
    1.创建一个弹出框组件
    2.导入并且注册
    3.完成弹出框功能数据
    4.完成表单验证
    5.点击按钮打开弹出框
    6.导入并且调用api
    7.调用成功
      关闭弹出框
      提示

  删
    1.定义接口
    2.点击按钮打开弹出框
    3.调用
      提示
      刷新父当前页的数据
      有分页处理分页

  编
    1.定义接口
    2.弹出框回显
      数据深拷贝(当前点击包含当前数据)
      调用接口回显
    3.给弹出框定义一个变量mode(标识)处理场景 (发送请求判断是否是新镇还是编辑-分场景调用api)
    4.新增编辑都要修改mode值
    5.处理标题(依赖标识来区分)
    6.处理表单验证(不包含当前name和code值)
    7.调用接口
    8.调用成功
      关闭弹出框
      刷新当前页数据

  弹出框
    1.编辑好弹出框内容,
    2.根据需求完成表单验证
    3.

-->

<script>

import { companydepartment, companydepartmentdel } from '@/api/zuzhujiagou'
import index from './components/index.vue'
export default {

  components: {
    index
  },

  data() {
    return {
      list: [

      ],
      minlist: [],
      loading: true
    }
  },
  async created() {
    // 调用人事部方法获取 1-2
    this.hqrsb()
  },
  methods: {

    // 将封装获取部门数据,方便添加后能够立即刷新,不用手动刷新 1-1
    async hqrsb() {
      // 添加前显示lod
      this.loading = true
      const res = await companydepartment()
      // 加载完成关闭
      this.loading = false

      this.list = this.m(res.data.data.depts)

      this.minlist = res.data.data.depts

      console.log(this.list, '部门数据')
    },
    // 找到第一层数据
    // 找出任意层的子级，间pid改为形参
    // 加上children
    // 找出当前id的子集

    m(arr, pud = '') {
      return arr.filter(v => {
        if (v.pid === pud) {
          v.children = this.m(arr, v.id)

          return true
        }
      })
    },
    // 根据需求，点击弹出框时，要携带点击的pud-id
    addEven(pud) {
      this.$refs.tj.shwo = true
      // 竟然拿到了元素，那么就可以操作他data的数据了
      // 并且调用所有方法
      this.$refs.tj.form.pid = pud
      // 修改标识
      this.$refs.tj.naemmac = 'add'
    },

    // 删除部门
    async deletEeven(id) {
      await this.$confirm('确认删除吗', '提示')
      await companydepartmentdel(id)
      this.hqrsb()
    },

    // 编辑部门数据回显
    bjEven(data) {
      // 修改标识
      this.$refs.tj.naemmac = 'bjm'

      this.$refs.tj.shwo = true
      // data可以获取点击的数据
      console.log(data)
      // 成功回显，但是有bug,点击编辑会同步list数据
      // this.$refs.tj.form = data
      // 原因类似地址问题，因为他是赋值data中的数据，form改等于data改地址相同

      // 解决，深利用拷贝 解决地址一致问题
      this.$refs.tj.form = JSON.parse(JSON.stringify(data))
    }

  }
}
</script>

<style scoped lang="scss">

  .zuzhujiagou{
    padding: 20px;
    .box{
      width:80%;
      margin: 0 auto;
      font-size: 13px;

      .top{
        display: flex;
        align-items: center;
        .czbk{
          flex: 1;
        }
      }
    }
  }

</style>
